import React, { useEffect, useState } from 'react';
import { NavLink } from 'react-router-dom'

import { Menu } from 'antd';
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
//
import { routes } from 'router/config'
import { filterRoutes } from 'utils/auth'

const { SubMenu } = Menu;

// submenu keys of first level
const rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];

const filterTypeRoutes = (arr: any[], type: number) => {
  return arr.filter((v:any) => v.meta.type === type);
}


// 封装一个menu递归组件
function MenuList(routes:any[]) {
  // 循环
  return <>
   {
       routes.map(item => {
         return <Menu>
           {
             item.children ? (<>
              {item.children.map((v:any) => {
                <SubMenu>
                 {/* {
                   v.children? () : ()
                 } */}
                </SubMenu>
              })}
             </>) : (<>
              <Menu.Item key="9">Option 9</Menu.Item>
             </>)
           }
         </Menu>
       })
   }
  </>
}

// 组件
const Sider = () => {
  const [openKeys, setOpenKeys] = React.useState(['sub1']);
  const [sub1, setSub1] = useState<any[]>([])
  const [sub2, setSub2] = useState<any[]>([])
  useEffect(() => {
    const asyncRoutes = filterRoutes(routes, 0)
    setSub1(() => filterTypeRoutes(asyncRoutes[0].children, 1))
    setSub2(() => filterTypeRoutes(asyncRoutes[0].children, 2))

  }, [])

  /**
   *
   * @param keys
   *
   * [
   *
   * ]
   *
   */

  const onOpenChange = (keys:any) => {
    const latestOpenKey = keys.find((key: string) => openKeys.indexOf(key) === -1);
    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      setOpenKeys(keys);
    } else {
      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
    }
  };

   return MenuList(routes)

  // return (
    // <Menu mode="inline" openKeys={openKeys}
    // onOpenChange={onOpenChange}
    // style={{ width: '100%', height: '100vh' }}>
    //     {/*type=1  */}
    //   <SubMenu key="sub1" icon={<MailOutlined />} title="DashBoard">
    //    {
    //      sub1.map((item, index) => {
    //       return <Menu.Item key={index}>
    //          <NavLink to={item.path}>{item.meta.title}</NavLink>
    //       </Menu.Item>
    //      })
    //    }
    //   </SubMenu>
    //  {/*type=2 */}
    //   <SubMenu key="sub2" icon={<AppstoreOutlined />} title="表单页面">
    //   {
    //      sub2.map((item, index) => {
    //       return <Menu.Item key={item.path}>
    //          <NavLink to={item.path}>{item.meta.title}</NavLink>
    //       </Menu.Item>
    //      })
    //    }
    //   </SubMenu>
    //   {/*type=3  */}
    //   <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
    //     <Menu.Item key="9">Option 9</Menu.Item>
    //     <Menu.Item key="10">Option 10</Menu.Item>
    //     <Menu.Item key="11">Option 11</Menu.Item>
    //     <Menu.Item key="12">Option 12</Menu.Item>
    //   </SubMenu>
    // </Menu>
  // );
};

export default Sider;
